<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background: #fff;
            padding: 0;
            margin: 0;
        }

        .div_1 {
            width: 100vw;
            height: 100vh;
        }

        .div_2 {
            background: #d2d2d2;
            /* position: relative; */
            /* transform: translate(-50%, -50%); */
            /* top: 60%; */
            /* left: 50%; */
            width: 20%;
            height: 20%;
        }

        .div_3 {
            background: #ff0;
            position: absolute;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            width: 20%;
            height: 20%;
        }
    </style>
</head>

<body>
    <div class="div_1">
        <div class="div_2">
            <div class="div_3">
            </div>
        </div>
    </div>

    <script>
        function copyContent(from, to) {
            console.log(from, from.childNodes.length);
            for (var i = 0; i < from.childNodes.length; i++) {
                to.appendChild(from.childNodes[i]);
            }
        }

        var referenceBox = document.createElement('div');
        var link = document.createElement('a');
        link.href = 'http://www.sample.com';
        link.textContent = 'A Link';

        referenceBox.appendChild(link);

        for (var i = 0; i < 5; i++) {
            var newBox = document.createElement('div');
            copyContent(referenceBox, newBox);

            document.body.appendChild(newBox);
        }
    </script>
</body>

</html>